<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <!-- <p>1</p> -->
    </div>
</body>
<script>
    //喜欢学习，主动学习，疯狂学习

    //数组的对象api：https://www.runoob.com/jsref/jsref-obj-array.html

    //1.数组属性 length 可读可写

    let arr = [1,2,3];
    console.log(arr.length, 111);//3 111
    arr.length = 0;//清空数组

    //2.every() 检测数值元素的每个元素是否都符合条件.都符合就true，只要一个不符合就false。思想和 &&

    let arr2 = [2,8,4,10,6];

    //请问数组的每一项都是偶数吗？
    let res = arr2.every(function(item) {
        return item % 2 == 0
    })

    console.log(res,111);//false 111

    //课堂作业：1.arr2的数据都大于5吗？
    
    //3.filter() 检测数值元素，并返回符合条件所有元素的数组。过滤：留下满足条件的

    let arr3 = [2,4,6,8,7,9];

    //需求：找出arr3里面大于等于8的数据

    //普通的实现办法 for
    let arr4 = [];
    for(let i = 0; i < arr3.length; i++) {
        if(arr3[i] >= 8) {
            arr4.push(arr3[i])
        }
    }

    console.log(arr4, 333)

    //新办法：ES6
    let arr5 = arr3.filter(function(item){
        return item >= 8;
    })
    console.log(arr5, 444)

    //课堂作业：2.在arr3中找出所有的偶数。

    //4.forEach() 数组每个元素都执行一次回调函数。for循环的改写

    //item是必填参数。index和arr选填
    arr3.forEach(function(item,index,arr) {
        console.log(item, index, arr)
    })

    //5.includes() 判断一个数组是否包含一个指定的值.true 或 false

    let arr6 = [3,4,5,6];
    console.log(arr6.includes(5))

    //6.indexOf() 搜索数组中的元素，并返回它所在的位置 。返回下标或-1

    if(arr6.indexOf(5) >= 0) {
        //代表找到：
        console.log('true');
    }else{
        //代表没有找到
        console.log('false')
    }

    //7.join() 把数组的所有元素放入一个字符串.和字符串的split()是反操作

    let str = arr6.join('&');
    console.log(str,666)

    //8.map() 通过指定函数处理数组的每个元素，并返回处理后的数组

    let arr7 = [1,2,3,4,5];

    let arr8 = arr7.map(function(item) {
        return '<p>' + item + '</p>'
    })

    console.log(arr8,888);// ['<p>1</p>', '<p>2</p>', '<p>3</p>', '<p>4</p>', '<p>5</p>']

    let html = arr8.join('');
    console.log(html,999)
    let box = document.querySelector('#box');
    box.innerHTML = html;//渲染数据到页面中

    //9.pop() 删除数组的最后一个元素并返回删除的元素

    let newarr = [0,1,2,3];

    newarr.pop();//从尾部删除一个数据
    newarr.pop();//从尾部删除一个数据
    
    console.log(newarr,222)

    //10.push() 向数组的末尾添加一个或更多元素，并返回新的长度

    let arr10 = [1,2];

    arr10.push(3,5,6);//从数组的尾部插入新数据
    console.log(arr10,000)

    //11.shift() 删除并返回数组的第一个元素

    let newarr2 = [1,2,3];
    console.log(newarr,999)
    newarr2.shift();
    console.log(newarr2,333)

    //16.unshift() 向数组的开头添加一个或更多元素，并返回新的长度

    arr10.unshift(0,9,8)//从数组的头部插入新数据
    console.log(arr10,111);

    //12.slice() 选取数组的一部分，并返回一个新数组

    let arr11 = [1,2,3,4];
    let arr12 = arr11.slice(2);
    let arr13 = arr11.slice(1,3)
    console.log(arr12,123)
    console.log(arr13,123);//? 2,3

    //13.some() 检测数组元素中是否有元素符合指定条件.只要满足一个就true 思想和 ||

    //需求：arr11的数据中，有大于3的吗？
    let res2 = arr11.some(function(item) {
        return item > 4
    })

    console.log(res2, 456);

    //14.sort() 对数组的元素进行排序

    let myarr = ['banner','oppo','app','cat'];

    console.log(myarr,'排序前')
    myarr.sort();

    console.log(myarr,'排序后')

    let myarr2 = [1,5,7,3,8,12,9];

    //参数1-参数2：升序。参数2-参数1：降序
    myarr2.sort(function(a,b) {
        return b - a
    });
    console.log(myarr2,789);//[1, 12, 3, 5, 7, 8, 9]  没有排好序

    //15.splice() 从数组中添加或删除元素.任意位置的数据的：删除、 插入、替换

    let a = [1,2,3,4,5];

    //任意位置删除：删除下标为2的数据
    // let a1 = a.splice(2,1); //参数1和参数2是必填项。参数一：起始下标。参数二：删除元素的个数.返回删除的数据

    //任意位置插入：在下标为2的前面插入数据55和666
    // let a2 = a.splice(2,0,55,666);//参数一：起始下标。参数二：删除元素的个数.参数三起是选填，代表要插入的数据

    //任意位置替换：把下标为2后面的两个数据替换成7和8
    let a3 = a.splice(2,2,7,8);//?
    console.log(a,852);//?


    //课堂作业2：请问下面的数据中，isok都为真吗？
    //课堂作业3：请问下面的数据中商品002的color有“红”色的吗？
    let data = [
        {
            id : 001,
            color : ['红','绿','蓝'],
            isok : false
        },{
            id : 002,
            color : ['红','黄','蓝'],
            isok : true
        },{
            id : 003,
            color : ['红','紫','绿'],
            isok : false
        }
    ]


    let studentList = [{
        id : 2021001,
        name : '罗至轩',
        age : 19
    },{
        id : 2021002,
        name : '庄震灿',
        age : 19
    },{
        id : 2021003,
        name : '郭健',
        age : 18
    },{
        id : 2021004,
        name : '刘洌铒',
        age : 19
    },{
        id : 2021005,
        name : '刘正',
        age : 17
    }]

    //课堂作业：请把上面数据中，姓"刘"的同学找出来。
    //课堂作业：请把上面数据中，大于等于18岁的同学找出来。

</script>
</html>